{extend name="base"}
{block name="style"}
<script type="text/javascript" charset="utf-8" src="{:_static()}/wangEditor/wangEditor.js"></script>
<script type="text/javascript" charset="utf-8" src="{:_static()}/wangEditor/setDefaultConfig.js"></script>

{/block}
{block name="main"}
<div id="app" v-cloak>
    <el-row class="ws-quote">
        <el-col :span="24" >
            <el-button type="primary" size="small" @click="add">新增文章</el-button>
            <el-select v-model="params.module_id" placeholder="模块选择" size="small" clearable>
                <el-option label="全部模块" value="-1"></el-option>
                <el-option :label="item.title" :value="item.id.toString()" v-for="item of artmodules"></el-option>
            </el-select>
            <el-cascader
                placeholder="分类选择"
                :options="cates"
                :props="{value:'id',label:'name'}"
                size="small"
                v-model="params.cate_id"
                change-on-select
                clearable>
            </el-cascader>
            <el-select v-model="params.tag_id" placeholder="标签选择" size="small" clearable>
                <el-option label="全部标签" value="0"></el-option>
                <el-option :label="item.name" :value="item.id.toString()" v-for="item of arttags"></el-option>
            </el-select>
            <el-button type="primary" size="small" @click="search('{:url('')}')">搜索</el-button>
        </el-col>
    </el-row>


    <el-table
        v-loading="loading"
        border
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="ID"
          prop="id"
          :width="80"
          align="center">
        </el-table-column>
        <el-table-column
          label="文章标题"
          prop="title">
        </el-table-column>
        <el-table-column
          label="作者"
          width="120"
          prop="author">
        </el-table-column>
        <el-table-column
          label="所属模块"
          width="120"
          prop="module">
        </el-table-column>
        <el-table-column
          label="所属分类"
          width="120"
          prop="cate">
        </el-table-column>
        <el-table-column
          label="所属标签"
          width="120"
          prop="tag">
        </el-table-column>
        <el-table-column
          label="封面图"
          width="150"
          align="center">
            <template slot-scope="c">
                <el-tag v-if="!c.row.cover.length" type="info" size="mini">未设</el-tag>
                <img :src="imagePrefix+c.row.cover" style="width: 120px;height: auto;" v-else>
            </template>
        </el-table-column>
        <el-table-column
          label="添加时间"
          align="center"
          :formatter="dateFormats"
          prop="s_time">
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          prop="status"
          width="80"
          >
            <template slot-scope="status">
                <el-tag type="success"v-if="status.row.status">启用</el-tag>
                <el-tag type="info"v-else>禁用</el-tag>
            </template>
        </el-table-column>
        
        <el-table-column label="操作" width="350">
            <template slot-scope="c">
                <el-button type="danger" size="mini" @click="_wspost('{:url(\'del\')}',{id:c.row.id})">删除</el-button>
                <el-button v-if="c.row.status" type="info" size="mini" @click="close(c.row)">禁用</el-button>
                <el-button v-else type="primary" size="mini" @click="close(c.row)">启用</el-button>
                <el-button type="success" size="mini" @click="show(c.row)">详情</el-button>
                <el-button type="success" size="mini" @click="edit(c.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="page">{$list->render()|raw}</div>
    <!-- 查看文章 start -->
    <el-dialog :title="currentArticle.title" width="900" :visible.sync="showArticle" >
        <h1 style="line-height: 50px;text-align: center;padding-bottom: 20px;">{{currentArticle.title}}</h1>
        <p v-html="currentArticleContent" class="article-content"></p>
    </el-dialog>
    <!-- 查看文章 end -->
        
    <!-- 修改用户信息 start -->
    <el-dialog :title="dialogTitle" width="900px" :visible.sync="addVisible">
        <el-form ref="forms" :model="data" :rules="rules" label-width="80px">
            <el-form-item label="文章标题" prop="title">
                <el-input v-model="data.title" placeholder="文章标题"></el-input>
            </el-form-item>
            <el-form-item label="模块选择" prop="module_id">
                <el-select v-model="data.module_id" placeholder="请选择模块" @change="moduleIdChange">
                    <el-option
                      v-for="item in artmodules"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id"
                      >
                    </el-option>
                  </el-select>
            </el-form-item>
            <el-form-item label="分类选择">
                <el-cascader
                    placeholder="分类选择"
                    :options="cates"
                    :props="{value:'id',label:'name'}"
                    v-model="cate_ids"
                    change-on-select
                    @change="cateChange">
                </el-cascader>
            </el-form-item>
            <el-form-item label="标签选择" prop="tag_id">
                <el-select v-model="data.tag_id" placeholder="请选择标签">
                    <el-option
                      v-for="item in arttags"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                      >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="封面图" prop="is_blank">
                <el-upload
                  action="{:url('add')}"
                  :data="{id:data.id,image:data.cover}"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="data.cover.length" :src="imagePrefix+data.cover" style="width: 80%;height: auto;">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="文章内容" >
                <div id="myEditor"></div>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="data.status">
                    <el-radio :label="0">禁用</el-radio>
                    <el-radio :label="1">启用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">提 交</el-button>
        </div>
    </el-dialog>
    <!-- 修改用户信息 end -->
</div>
{/block}

<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>
<!--------------------------分割线------------------------>

{block name="vue"}
<script>
var app=new Vue({
    el:"#app",
    mixins:[wsMixins],
    data:{
        tableData:{$list->toJson()|raw}, // 列表数据
        artmodules:{$artmodules->toJson()|raw},
        artcates:{$artcates|raw},
        cates:{$artcates|raw},
        cate_ids:[],
        arttags:{$arttags->toJson()|raw},
        imagePrefix:"{:images()}",
        loading:false,
        row:{},
        params:{$params|raw},

        showArticle:false,
        currentArticle:{},
        currentArticleContent:"",
        editor:null,

        addVisible:false, //添加菜单框
        dialogTitle:'编辑文章',
        data:{}, // 添加、编辑数据
        rules:{
            title:[
                {required: true, message:'请输入文章标题'},
            ],
            
        },
    },
    created(){
        this.emptyData();
        this.setCateIds(this.params.cate_id);
    },
    watch:{
        addVisible(val){
            if(val){
                this.$nextTick(_=>{
                    this.initEditor();
                })
            }
        }
    },
    methods:{
        handleAvatarSuccess(res,file){
            if(res.status===0){
                this.data.cover=res.data;
                this.row.cover=res.data;
            }
            if(res.msg){
                this.$message.success(res.msg)
            }
        },
        beforeAvatarUpload(file){
            if (file.type.indexOf('image')===-1) {
              this.$message.error('仅允许上传图片文件!');
              return;
            }
            return true;
        },
        emptyData(newData={}){
            this.data=Object.assign({
                title:'',
                content:'',
                module_id:'',
                cate_id:'',
                tag_id:'',
                cover:'',
                status:1,
            },newData);
        },
        showDialog(isShow=true){
            this.addVisible=isShow;
        },
        //初始化Umeditor
        initEditor(){
            editor=this.editor;
            if(!editor){
              //实例化编辑器
              var E = window.wangEditor
              var editor = new E('#myEditor')
              editor.customConfig.uploadImgServer = "{:url('uploadsPicWangEditor')}";  
              setWangEditorDefaultConfig(editor,this._logger);
              editor.create();
              this.editor = editor;
            }
            editor.txt.html(this.data.content);
        },
        _logger(message){
          this.$message({
            type:'warning',
            message,
          })
        },
        // 选择模块 变更分类
        moduleIdChange(val){
            this._wspost("{:url('getCates')}",{module_id:val},res=>{
                this.cates=res.data;
            },false);
        },
        show(row){
            this.loading=true;
            if(row.tag_id===0){
              row.tag_id='';
            }
            if(row.cate_id===0){
              row.cate_id='';
            }
            this.currentArticle=this.clone(row);
            this._wspost("{:url('getContent')}",{'id':row.id},res=>{
                if(res.code){
                    this.currentArticleContent=res.data;
                    this.showArticle=true;
                    this.loading=false;
                }
            },false);
            
        },
        // 用户提交
        submit(){
            if(this.editor){
                this.data.content=this.editor.txt.html();
            }
            this.onSubmit('forms','{:url(\'add\')}');
        },
        // 新增
        add(){
            this.dialogTitle='新增文章';
            this.emptyData();
            this.showDialog();
        },
        // 编辑
        edit(row){
            this.loading=true;
            if(row.tag_id===0){
              row.tag_id='';
            }
            if(row.cate_id===0){
              row.cate_id='';
            }
            this.row=row;
            this.emptyData(row);
            this.dialogTitle='编辑文章';
            this.setCateIds(row.cate_id);
            this._wspost("{:url('getContent')}",{'id':row.id},res=>{
                if(res.code){
                    this.data.content=res.data;
                    this.showDialog();
                    this.$nextTick(_=>{
                        this.initEditor();
                    })
                    this.loading=false;
                }
            },false);
            
        },
        //添加时类型选择变化
        cateChange(val){
          let l=val.length;
          if(l){
            this.data.cate_id=val[l-1];
          }else{
            this.data.cate_id=0;
          }
          
        },
        setCateIds(cate_id){
          if(!cate_id){
            this.cate_ids=[];
            return;
          }
          let cate_ids=[cate_id],
              isEnd=false;
              cates=this.cates;
          for(let item of cates){
            if(item.id===cate_id){
              break;
            }else if(item.children){
              for(let c of item.children){
                if(c.id===cate_id){
                  isEnd=true;
                  cate_ids.unshift(item.id);
                  break;
                }
              }
            }
            if(isEnd)break;
          }
          this.cate_ids=cate_ids;
        },
        // 禁用、启用用户
        close(row){
            this._wspost("{:url('close')}",{'id':row.id},res=>{
                if(res.code){
                    row.status=!row.status;
                }
            },false);
        },
        
    },
});
</script>
{/block}